<template>
  <div class="custom-el-main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
          {{ $t("i18n.path_menus") }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container>
      <el-main>
        <div class="container el-custom-table-container-menu">
          <div class="handle-box">
            <el-button
              type="primary"
              icon="el-icon-lx-add"
              @click="handleAdd('')"
              size="mini"
              >{{ $t("i18n.co_add") }}</el-button
            >
          </div>
          <div class="el-table-custom-body">
            <el-table
              :data="tableData"
              row-key="cnName"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              style="width:100%"
              :max-height="windowHeight - 210 + 'px'"
              :row-style="{ height: '0' }"
              :cell-style="{ padding: '3px' }"
            >
              <el-table-column
                prop="menuId"
                :label="$t('i18n.menuId')"
                width="140"
                align="left"
              ></el-table-column>
              <el-table-column
                prop="code"
                :label="$t('i18n.menucode')"
                width="240"
                align="center"
              ></el-table-column>
              <el-table-column :label="$t('i18n.men_name')" align="left">
                <template #default="scope">
                  <el-button
                    type="text"
                    v-if="scope.row.status"
                    class="defaultColor"
                    >{{ scope.row.cnName }}</el-button
                  >
                  <el-button type="text" v-if="!scope.row.status" class="red">
                    {{ scope.row.cnName }}
                  </el-button>
                  <el-popover placement="right-start" trigger="click">
                    <template #reference>
                      <el-button
                        :type="scope.row.status ? 'primary' : 'danger'"
                        class="btnCss"
                        round
                        size="mini"
                      >
                        <i class="el-icon-more"></i>
                      </el-button>
                    </template>
                    <el-button
                      type="text"
                      icon="el-icon-lx-add"
                      @click="handleAdd(scope.row.code)"
                      >{{ $t("i18n.co_add") }}</el-button
                    >
                    <br />
                    <el-button
                      type="text"
                      icon="el-icon-edit"
                      @click="handleEdit(scope.row.menuId)"
                      >{{ $t("i18n.co_edit") }}</el-button
                    >
                    <br />
                    <el-button
                      type="text"
                      icon="el-icon-open"
                      @click="handleEnable(scope.row.menuId)"
                    >
                      {{
                        $t(
                          scope.row.status
                            ? "i18n.co_disable"
                            : "i18n.co_enable"
                        )
                      }}
                    </el-button>
                    <br />
                    <el-button
                      type="text"
                      icon="el-icon-lx-group"
                      @click="handlerRole(scope.row.menuId)"
                      >{{ $t("i18n.co_role") }}</el-button
                    >
                    <br />
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      class="red"
                      @click="handleDelete(scope.row.menuId)"
                      >{{ $t("i18n.co_del") }}</el-button
                    >
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('i18n.men_icon')"
                width="60"
                align="center"
              >
                <template #default="scope">
                  <el-tag
                    v-show="scope.row.icon"
                    v-if="scope.row.status"
                    effect="dark"
                  >
                    <i :class="scope.row.icon"></i>
                  </el-tag>
                  <el-tag
                    v-if="!scope.row.status"
                    v-show="scope.row.icon"
                    :type="'danger'"
                    effect="dark"
                  >
                    <i :class="scope.row.icon"></i>
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="dic_Creator"
                :label="$t('i18n.men_crater')"
                align="center"
                width="240"
              ></el-table-column>
              <el-table-column
                prop="dic_Creatdate"
                :label="$t('i18n.men_createdate')"
                align="center"
                width="140"
              ></el-table-column>
              <el-table-column
                prop="dic_Enable"
                :label="$t('i18n.men_enable')"
                align="center"
                width="100"
              >
                <template #default="scope">
                  <el-tag v-if="scope.row.status">{{
                    scope.row.dic_Enable
                  }}</el-tag>
                  <el-tag v-if="!scope.row.status" :type="'danger'">{{
                    scope.row.dic_Enable
                  }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :title="drawer_Title"
      v-model="drawer"
      size="30%"
      :withHeader="false"
    >
      <div class="p_l">
        <el-tabs>
          <el-tab-pane>
            <template #label>
              <div>
                <span class="font_16px">
                  <i class="el-icon-set-up"></i>
                  {{ drawer_Title }}
                </span>
              </div>
            </template>
            <div :style="outHeight">
              <el-scrollbar>
                <el-form
                  :model="model"
                  :label-position="top"
                  :rules="rules"
                  ref="ruleForm"
                  size="small"
                >
                  <el-form-item
                    :label="$t('i18n.men_name') + ':'"
                    prop="cnName"
                  >
                    <el-input
                      :placeholder="$t('i18n.men_name')"
                      v-model="model.cnName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="$t('i18n.menu_enname') + ':'"
                    prop="enName"
                  >
                    <el-input
                      :placeholder="$t('i18n.menu_enname')"
                      v-model="model.enName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('i18n.menucode') + ':'" prop="code">
                    <el-input
                      :placeholder="$t('i18n.menucode')"
                      v-model="model.code"
                      :disabled="diableMode.codedisable"
                    ></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('i18n.menu_parent_code') + ':'">
                    <el-input
                      :placeholder="$t('i18n.menu_parent_code')"
                      v-model="model.parentCode"
                      :disabled="diableMode.parentCodedisable"
                    ></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('i18n.menu_icon') + ':'">
                    <el-input
                      :placeholder="$t('i18n.menu_icon')"
                      v-model="model.icon"
                      @click="innerDrawer = true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="$t('i18n.menu_address') + ':'"
                    prop="Address"
                  >
                    <el-input
                      :placeholder="$t('i18n.menu_address')"
                      v-model="model.address"
                      :disabled="diableMode.addressdisable"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="submitForm('ruleForm')"
                    >
                      {{ $t("i18n.btn_submit") }}
                    </el-button>
                    <el-button
                      type="danger"
                      size="mini"
                      @click="resetForm('ruleForm')"
                    >
                      {{ $t("i18n.btn_cancel") }}
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-drawer
        :title="$t('menu.ICON_SELECT')"
        :append-to-body="true"
        v-model="innerDrawer"
        size="20%"
        :withHeader="false"
      >
        <IconSelectVue
          @IconSelected="IconSelected"
          :icon="model.icon"
          ref="iconRef"
        ></IconSelectVue>
      </el-drawer>
    </el-drawer>
    <el-drawer
      :title="$t('i18n.co_role')"
      v-model="roleDrawer"
      :append-to-body="true"
      size="40%"
      :withHeader="false"
      ><el-tabs :loading="roleLoading">
        <el-tab-pane>
          <template #label>
            <div>
              <span class="font_16px">
                <i class="el-icon-lx-skin"></i>
                {{ $t("i18n.co_role") }}
              </span>
            </div>
          </template>
          <el-main>
            <div id="container" :style="autoHeight">
              <table-componets-vue
                :isShowButton="true"
                :tables="roles"
                :Select="'MultiSelect'"
                :ref="'Role_multipleTable'"
                :isOpertions="1 == 1"
                :maxheight="420"
                @tableEvent="tableEvent"
              ></table-componets-vue></div
          ></el-main>
          <el-footer>
            <div class="form_handle-box">
              <el-button
                v-if="pageType != 'view' && pageType != null"
                plain
                type="primary"
                @click="SaveRoleEvent()"
                size="mini"
                >{{ $t("table.Global_Save") }}</el-button
              >

              <el-button
                plain
                type="danger"
                @click="roleDrawer = false"
                size="mini"
                >{{ $t("table.Global_Back") }}</el-button
              >
            </div>
          </el-footer>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <dialog-roles-componet-vue
      ref="roles"
      @confirmEvent="dialogConfirmEvent"
    ></dialog-roles-componet-vue>
  </div>
</template>

<script>
import reqVue from "../utils/req.vue";
import IconSelectVue from "../components/IconSelect.vue";
import TableComponetsVue from "../components/TableComponets.vue";
import DialogRolesComponetVue from "../components/DialogRolesComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  name: "basetable",
  data() {
    var checkCnname = (rule, value, callback) => {
      value = this.model.cnName;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("i18n.Not_InputName")));
      } else {
        if (value.length > 20) {
          return callback(new Error(this.$t("i18n.Length_Name")));
        } else {
          var regex = new RegExp(
            "^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9-]){1,20}$"
          ); //包含“-”
          if (!regex.test(value)) {
            return callback(new Error(this.$t("i18n.Name_Fromatting")));
          } else {
            callback();
          }
        }
      }
    };
    var checkEnname = (rule, value, callback) => {
      value = this.model.enName;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("menu.Not_InputENName")));
      } else {
        if (value.length > 100) {
          return callback(new Error(this.$t("menu.Length_ENName")));
        } else {
          var regex = new RegExp("^([a-zA-Z0-9- ]){1,20}$"); //包含“-”
          if (!regex.test(value)) {
            return callback(new Error(this.$t("menu.ENName_Fromatting")));
          } else {
            callback();
          }
        }
      }
    };
    var checkCode = (rule, value, callback) => {
      value = this.model.code;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("menu.Not_InputCode")));
      } else {
        if (value.length > 20) {
          return callback(new Error(this.$t("menu.Length_Code")));
        } else {
          var regex = new RegExp("^([a-zA-Z0-9]){1,20}$"); //包含“-”
          if (!regex.test(value)) {
            return callback(new Error(this.$t("menu.Code_Fromatting")));
          } else {
            callback();
          }
        }
      }
    };
    return {
      windowHeight: windowHeight,
      autoHeight: {
        height: "",
      },
      outHeight: {
        height: "",
      },
      tableData: [],
      loading: true,
      drawer: false,
      innerDrawer: false,
      model: {
        menuId: 0,
        code: "",
        cnName: "",
        enName: "",
        address: "",
        icon: "",
        parentCode: "",
        status: true,
        sequence: 0,
      },
      diableMode: {
        parentCodedisable: true,
        codedisable: false,
        addressdisable: false,
      },
      rules: {
        code: [{ required: true, validator: checkCode, trigger: "blur" }],
        cnName: [{ required: true, validator: checkCnname, trigger: "blur" }],
        enName: [{ required: true, validator: checkEnname, trigger: "blur" }],
      },
      pageType: "add",
      drawer_Title: "",
      roleDrawer: false,
      roles: [],
      menuId: 0,
      roleLoading: true,
    };
  },
  components: {
    IconSelectVue,
    TableComponetsVue,
    DialogRolesComponetVue,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      reqVue.$Post(null, "menu/v1.0/tables").then(
        function(data) {
          this.tableData = data.body;
          console.log("tag", data.body);
          this.loading = false;
        }.bind(this)
      );
    },
    getHeight() {
      this.outHeight.height = windowHeight - 70 + "px";
      this.autoHeight.height = windowHeight - 225 + "px";
    },
    ///删除
    handleDelete(id) {
      this.loading = true;
      this.$confirm(this.$t("i18n.confirm_del"), this.$t("i18n.confirm"), {
        type: "warning",
      })
        .then(() => {
          reqVue.$Post(null, "menu/v1.0/del/" + id).then(
            function(re) {
              if (re.status) {
                this.$message.success(this.$t("i18n.confirm_del_success"));
                window.location.href = "/";
              } else {
                this.$message.error(re.message);
              }
              this.loading = false;
            }.bind(this)
          );
        })
        .catch(() => {});
    },
    ///启用？？
    handleEnable(id) {
      reqVue.$Post(null, "menu/v1.0/enable/" + id).then(
        function(re) {
          if (re.status) {
            window.location.href = "/";
          } else {
            this.$message.error(re.message);
          }
          this.loading = false;
        }.bind(this)
      );
    },
    handleAdd(code) {
      this.model = {
        menuId: 0,
        code: "",
        cnName: "",
        enName: "",
        address: "",
        icon: "",
        parentCode: code,
        status: true,
        sequence: 0,
      };
      this.diableMode.addressdisable = false;
      this.diableMode.codedisable = false;
      this.drawer_Title = this.$t("i18n.drawer_menu_add_Title");
      this.icon_title = this.$t("menu.ICON_SELECT");
      this.drawer = true;
      this.pageType = "add";
    },
    handleEdit(id) {
      this.drawer_Title = this.$t("i18n.drawer_menu_up_Title");

      reqVue.$Post(null, "menu/v1.0/singe/" + id).then(
        function(re) {
          if (re.status) {
            this.model = re.body;
            this.diableMode.codedisable = true;
          } else {
            this.$message.error(re.message);
          }
          this.loading = false;
        }.bind(this)
      );
      this.drawer = true;
      this.pageType = "edit";
      console.log("tag", id);
    },
    resetForm(rules) {
      this.drawer = false;
      console.log("tag", rules);
    },
    submitForm(ruleName) {
      this.$refs[ruleName].validate((valid) => {
        if (valid) {
          this.loading = true;
          console.log("tag", ruleName);
          var url = "menu/v1.0/add";
          if (this.pageType !== "add") {
            url = "menu/v1.0/editor";
          }

          reqVue.$Post(this.model, url).then(
            function(re) {
              if (re.status) {
                window.location.href = "/";
                this.drawer = false;
              } else {
                this.$message.error(re.message);
              }
              this.loading = false;
            }.bind(this)
          );
        } else {
          return false;
        }
      });
    },
    IconSelected(item) {
      this.model.icon = item;
      this.innerDrawer = false;
    },
    handlerRole(id) {
      this.menuId = id;
      reqVue.$Post(null, "menu/v1.0/roles/" + id).then(
        function(re) {
          if (re.status) {
            this.roles = re.body;
          } else {
            this.$message.error(re.message);
          }
          this.loading = false;
        }.bind(this)
      );
      this.roleDrawer = true;
    },
    tableEvent(item) {
      this.dialogAddEvent(item);
      this.dialogDeleteEvent(item);
    },
    dialogAddEvent(item) {
      if (item.data.value == "add") {
        this.$refs.roles.paramters = {
          fieldKey: "role",
          data: this.roles.body,
        };
        this.$refs.roles.dialogRoleTableVisible = true;
        this.$refs.roles.InitTable(null);
      }
    },
    dialogDeleteEvent(item) {
      if (item.data.value == "delete") {
        let tables = this.$refs.Role_multipleTable.tableResult;
        tables.forEach((element) => {
          var index = this.roles.body.indexOf(element);
          if (index !== -1) {
            this.roles.body.splice(index, 1);
          }
        });
      }
    },
    dialogConfirmEvent(res) {
      if (res != null && res != undefined) this.roles.body = res.result;
    },
    SaveRoleEvent() {
      this.roleLoading = true;
      reqVue.$Post(this.roles.body, "menu/v1.0/addroles/" + this.menuId).then(
        function(re) {
          if (re.status) {
            this.getData();
            this.roleLoading = false;
          } else {
            this.$message.error(re.message);
            this.roleLoading = false;
          }
          this.roleDrawer = false;
        }.bind(this)
      );
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>

<style scoped>
.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.btnCss {
  min-height: 14px;
  font-size: 14px;
  padding: 0px 5px;
  margin-left: 2px;
}
.defaultColor {
  color: #606266;
}
.p_l {
  padding: 10px 20px 10px 20px;
}
.font_16px {
  font-size: 14px;
  font-weight: bolder;
  width: 100%;
}
.el-tabs__item #tab-0 {
  width: 100%;
}
.el-tabs__nav .is-top {
  width: 100%;
}
.icon_div_style {
  margin: 11px;
  float: left;
}
</style>
